<template>
  <div class="goodsDetail">
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- advantage -->
    <van-row class="advantage">
      <van-col span="8"
        ><van-icon
          class="icon"
          color="darkred"
          name="passed"
        />30天无忧退货</van-col
      >
      <van-col span="8"
        ><van-icon
          class="icon"
          color="darkred"
          name="passed"
        />48小时快速退费</van-col
      >
      <van-col span="8"
        ><van-icon
          class="icon"
          color="darkred"
          name="passed"
        />满88元免邮费</van-col
      >
    </van-row>
    <!-- 商品信息 -->
    <van-row class="info">
      <van-col class="title" span="24">{{ info.name }}</van-col>
      <van-col class="des" span="24">{{ info.goods_brief }}</van-col>
      <van-col class="price" span="24">{{
        info.retail_price | formatPrice
      }}</van-col>
    </van-row>
    <!-- 弹出框 -->

    <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup
      class="popupBox"
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-card :thumb="info.list_pic_url">
        <template #title>
          <div class="popupPrice">
            价格：{{ info.retail_price | formatPrice }}
          </div>
        </template>
        <template #desc>
          <div class="popupNumber">库存：{{ info.goods_number }}</div>
        </template>
      </van-card>
      <div style="padding: 0.1rem; font-size: 0.2rem">数量:</div>
      <van-stepper v-model="stepNum" />
    </van-popup>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        text="加入购物车"
      />
      <van-goods-action-button
        class="goodsMenu"
        color="#7232dd"
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { getGoodsDetailAPI } from "@/request/api";
export default {
  async created() {
    // console.log(this.$route.query.goodsID);
    // this.goodsID = this.$route.query.goodsID;
    //从地址栏获取id同时发起请求获取商品详细数据
    let res = await getGoodsDetailAPI(this.$route.query.goodsID);
    console.log(res);
    let { issue, info, gallery, attribute } = res.data;

    this.issue = issue;
    this.info = info;
    this.gallery = gallery;
    this.attribute = attribute;
  },
  data() {
    return {
      //   goodsID: "", //商品ID
      issue: [], //疑问信息
      info: [], //商品信息
      gallery: [], //轮播图
      attribute: [], //参品参数
      show: false, //弹出框控制
      stepNum: 1, //计步器数目
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item,
img {
  width: 100vw;
  height: 100vw;
}
.advantage {
  background-color: #efefef;
  text-align: center;
  font-size: 0.14rem;
  line-height: 0.3rem;
  .icon {
    margin-right: 0.05rem;
  }
}
.info {
  text-align: center;
  .title {
    font-size: 0.2rem;
    line-height: 0.4rem;
  }
  .des {
    font-size: 0.16rem;
    line-height: 0.6rem;
  }
  .price {
    color: darkred;
    font-size: 0.16rem;
    line-height: 0.4rem;
  }
}
// popup
.popupBox {
  position: relative;
  bottom: 150px;
  z-index: 990;
}
.popupPrice {
  line-height: 0.5rem;
}
.popupNumber {
  line-height: 0.4rem;
}
// 商品菜单
.goodsMenu {
  position: relative;
  z-index: 999;
}
</style>
